<template>
  <div class="pie-container">
    <a-card class="card">
      <div
        id="pieChart"
        ref="pieChart"
        :style="{ width: props.width, height: props.height }"
      ></div>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { EChartsOption, EChartsType } from "echarts";
import { onMounted, onUnmounted, ref } from "vue";

const pieChart = ref(null);
const props = defineProps({
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "100%",
  },
});
// 线性表的配置项
const option = ref<EChartsOption>({
  legend: {
    top: "bottom",
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true },
    },
  },
  series: [
    {
      name: "Nightingale Chart",
      type: "pie",
      roseType: "area",
      data: [
        { value: 40, name: "rose 1" },
        { value: 38, name: "rose 2" },
        { value: 32, name: "rose 3" },
        { value: 30, name: "rose 4" },
        { value: 28, name: "rose 5" },
        { value: 26, name: "rose 6" },
        { value: 22, name: "rose 7" },
        { value: 18, name: "rose 8" },
      ],
    },
  ],
});

const initChart = () => {
  const myChart: EChartsType = echarts.init(pieChart.value!);
  myChart.setOption(option.value);
  window.addEventListener("resize", () => myChart.resize());
};

onMounted(() => {
  initChart();
});
onUnmounted(() => {
  window.addEventListener("resize", null);
});
</script>
<style lang="less" rel="stylesheet/less" scoped>
.pie-container {
  margin: 10px;
  height: calc(100% - 60px);

  .card {
    height: 100%;
    overflow: scroll;
    box-shadow: 0px 0px 4px rgb(0 0 0 / 12%);
    border-radius: 4px;
    :deep(.ant-card-body) {
      height: 100%;
    }
  }
}
</style>
